<?php
    session_name('dyh_session');
    session_start(); //start a session
    if (!(isset($_SESSION['fname']) && isset($_SESSION['email']) && isset($_SESSION['payment']) && isset($_COOKIE['dyh_region']))){
        /*remove PHPSESSID cookie from browser, that was created by session_start() above.*/
        setcookie( session_name(), '', time()-3600, '/' );
        setcookie('dyh_region', '', time()-3600, '/');
        //user not registered so redirect to register page
        header('location:page2.html?lan=en');
        die();
    }
?>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Draw Your Heart Web App</title>
    <link href="css/ui-lightness/jquery-ui-1.10.1.custom1.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
</head>
<body>
<div id="mainContainer">
    <div id="header">
        <span>1350 x 50</span>
        <!--<span>Something Awesome!</span>
        <ul id="navigationLinks">
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">Credits</a>
            </li>
            <li>
                <a href="#">Visit Our Website</a>
            </li>
        </ul>-->
    </div>
    <div id="content">
        <div id="loadingMsgBox">
            <p>Loading something awesome..checking browser compatibility</p>
        </div>
        <ul id="contentLayout">
            <li>
                <div id="controls">
                    <ul class="controlContainer">
                        <!--<li>
                            <p style="text-align:center; color:#1c94c4; font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-weight:bold; font-size:1.7em; margin-bottom:5px;">TITLE HERE</p>
                            <p id="sampleBtn1" style="text-align:center; color:#1c94c4; font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-weight:bold; font-size:1.2em; cursor:pointer;">See HeartCANVAS Sample</p>
                            <p id="sampleBtn2" style="text-align:center; margin-bottom:15px; color:#1c94c4; font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-weight:bold; font-size:1.2em; cursor:pointer;">Watch Youtube Instructions</p>
                        </li>-->
                        <li>
                            <table>
                                <tr>
                                    <td class="index">
                                        <span>1. </span>
                                    </td>
                                    <td>
                                        <input id="brushBtn" type="button" value="Select Your Brushes" class="btnControls">
                                        <div class="collapsibleContainer" id="collapsibleContainer1">
                                            <p>Choose Brush size</p>
                                            <div class="brushSizeBtnGroup">
                                                <button class="btn active" id="small">
                                                    <div class="small">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="med">
                                                    <div class="med">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="large">
                                                    <div class="large">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="veryLarge">
                                                    <div class="veryLarge">&nbsp;</div>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="help">
                                        <span id="brushHelp">?</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="index">
                                        <span>2. </span>
                                    </td>
                                    <td>
                                        <li class="ui-state-default ui-corner-all" style="padding:5px 0 10px 10px; margin-bottom:10px;">
                                            <p style="text-align:center; margin-bottom:5px;">Choose your Colo(u)rs</p>
                                            <div id="pick" style="width:175px; height:10px; margin-bottom:6px; border:1px solid #9a9a9a;"></div>
                                            <canvas id="colorPicker" width="175" height="140" style="border:1px solid #9a9a9a;">
                                                HTML5 Canvas Not Supported
                                            </canvas>
                                        </li>
                                    </td>
                                    <td class="help">
                                        <span>?</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="index">
                                        <span>3. </span>
                                    </td>
                                    <td>
                                        <!-- Removing Paint Bucket Button for Beta. IE has issues with Paint Bucket -->
                                        <!--<input id="paintBucketBtn" type="button" value="Use PaintBucket to Fill In!" class="btnControls">-->
                                        <input id="backgroundColorBtn" type="button" value="Apply a Background Color" class="btnControls">
                                    </td>
                                    <td class="help">
                                        <span id="backgroundColorHelp">?</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="index">
                                        <span>4. </span>
                                    </td>
                                    <td>
                                        <input id="eraserBtn" type="button" value="Click here for Erasers" class="btnControls">
                                        <div class="collapsibleContainer" id="collapsibleContainer3">
                                            <p style="">Choose Eraser size</p>
                                            <div class="brushSizeBtnGroup">
                                                <button class="btn active" id="eraserSmall">
                                                    <div class="small">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="eraserMed">
                                                    <div class="med">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="eraserLarge">
                                                    <div class="large">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="eraserVeryLarge">
                                                    <div class="veryLarge">&nbsp;</div>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="help">
                                        <span>?</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="index">
                                        <span>5. </span>
                                    </td>
                                    <td>
                                        <input type="button" value="Sign your HeartCANVAS" id="signBtn" class="btnControls"/>
                                        <div class="collapsibleContainer" id="collapsibleContainer4">
                                            <p>Use this pen to sign</p>
                                            <p>or make a note</p>
                                            <div class="brushSizeBtnGroup">
                                                <button class="btn" id="redBrush">
                                                    <div class="redBrush">&nbsp;</div>
                                                </button>
                                                <button class="btn" id="blackBrush">
                                                    <div class="blackBrush">&nbsp;</div>
                                                </button>
                                                <button class="btn active" id="purpleBrush">
                                                    <div class="purpleBrush">&nbsp;</div>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="help">
                                        <span>?</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="index">
                                        <span>6. </span>
                                    </td>
                                    <td>
                                        <input type="button" value="Start Again! Clear ALL" id="clearBtn" class="btnControls"/>
                                    </td>
                                    <td class="help">
                                        <span>?</span>
                                    </td>
                                </tr>
                            </table>

                        </li>
                        <li>
                            <div class="howTo">
                                <span>How to Video</span>
                            </div>
                        </li>
                    </ul>
                    <!--<input type="button" value="Get Login Status" onclick="getLoginStatus()">-->
                </div>
            </li>
            <li>
                <!--<div style="text-align:center; font-weight:bold; margin-top:20px;">
                    <span style="font-size:1.5em">$1,000,000</span>
                    <span style="color:red; font-size:1.3em; margin-left:5px;">World</span><span style="color:#9C0FCB; font-size:1.3em">Titles</span>
                    <span style="color:red; font-size:1.3em; margin-left:5px;">World</span><span style="color:#9C0FCB; font-size:1.3em">DRAW</span>
                    <span style="font-size:1.4em; margin-left:5px;">2013/14</span>
                </div> -->
                <div id="flagBox">
                    <p>Space for title</p>
                    <!--<img src="assets/icons/canada.png" alt="Canada" width="20">
                    <img src="assets/icons/uk.png" alt="UK" width="20">
                    <img src="assets/icons/usa.png" alt="USA" width="20"> -->
                </div>
                <div id="drawingCanvasHolder" class="ui-state-default ui-corner-all" style="background:#d9d8d8; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  border-bottom: 1px solid rgba(0,0,0,0.25);">
                    <canvas id="sponsorBox" width="400" height="120">
                        <p>Sorry, you need to have a browser that supports HTML5 Canvas</p>
                    </canvas>
                    <canvas id="paintBox">
                        <p>Sorry, you need to have a browser that supports HTML5 Canvas</p>
                    </canvas>
                </div>
            </li>
            <li id="helpContainer">
                <div style="width:220px; height:150px; background:#efefef;  border: 1px solid #9a9a9a; text-align:center;">
                    <p>Advertising Banner</p>
                </div>
                <p style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.2em; margin:10px 0 10px 0;">There are two ways to raise funds!</p>
                <table>
                    <tr>
                        <td colspan="2" style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em;">1. Use Facebook</td>
                    </tr>
                    <!--<tr>
                        <td><img src="assets/icons/help.png"/></td>
                        <td><span id="helpBtn">Help links</span></td>
                    </tr>-->
                    <tr>
                        <td><img src="assets/icons/fb.png"/></td>
                        <td><span id="sharePhotoFB">Share your Drawing</span></td>
                    </tr>
                    <tr>
                        <td><img src="assets/icons/fb.png"/></td>
                        <td><span id="shareFBWall">Share a message</span></td>
                    </tr>
                </table>
                <p style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em; margin:10px 0 0 0; width:230px;" id="sendEmail">
                    2. Send your HeartDRAW with your own E-mail
                </p>
                <div class="emailContainer" id="sendEmailContainer">
                    <input type="text" id="senderName" class="email_text" placeholder="Your name" maxlength="30" title="Enter your name, so that we can tell it was you">
                    <input type="text" id="sendEmailText" class="email_text" placeholder="Receiver's Email" title="Enter the email address of the person with whom you want to share your drawing">
                    <textarea id="emailDescription" placeholder="Share a message.." class="email_text_area" rows="5" maxlength="350" title="Say something"></textarea>
                    <input type="button" id="sendEmailBtn" value="Send"/>
                    <p id="emailStatus"></p>
                </div>
                <!--<table>
                    <tr>
                        <td colspan="2">
                            <input type="text" id="sendEmailText" placeholder="Receiver's email (demo)" title="Enter the email address of the person with whom you want to share your drawing">
                            <input type="button" id="sendEmailBtn" value="Send"/>
                        </td>
                    </tr>
                    <!--<tr>
                        <td><img src="assets/icons/save.png"/></td>
                        <td><span id="saveBtn">Save Drawing</span></td>
                    </tr>-->
                <!--</table>-->
                <p id="saveBtn" style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em; margin:10px 0 0 0; width:230px;" title="Save a copy of your drawing on your computer as a souvenir">
                    3. Save Drawing
                </p>
                <!--<p style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em; margin:10px 0 0 0; width:230px;">
                    4. Spread the word BOX !
                </p>-->
                <p style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em; margin:10px 0 0 0; width:230px;">
                    4. Sign up for our newsletters !
                </p>
                <!-- Begin MailChimp Signup Form -->
                <!--<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">--> <!-- Not using mail chimp css -->
                <div id="mc_embed_signup">
                    <form action="http://facebook.us4.list-manage.com/subscribe/post?u=2b6572a937adf6d7b517c6931&amp;id=6a75699afc" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    	<!--<label for="mce-EMAIL">Subscribe to our mailing list</label>-->
                    	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
                    	<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                    </form>
                </div>
                <!--End mc_embed_signup-->

                <!--<p id="printDrawing" style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em; margin:10px 0 0 0; width:230px;">
                    6. Print your Drawing(Demo)
                </p>-->
                <p style="font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; font-size: 1.3em; margin:10px 0 0 0; width:230px;">
                    5. Share(under construction)
                </p>
                <ul class="sharingBtnHolder">
                    <li>
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="none" data-url="http://tinyurl.com/cz2w6gp" data-text="I Drew My Heart for HeartWORLD to help conquer childhood obesity. Draw your too http://angelicsweets.ca/test. Donate below">Tweet</a>
                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    </li>
                    <li>
                        <!-- Place this tag where you want the share button to render. -->
                        <div class="g-plus" data-action="share" data-annotation="none" data-href="http://angelicsweets.ca/test/"></div>

                        <!-- Place this tag after the last share tag. -->
                        <script type="text/javascript">
                            (function() {
                                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                po.src = 'https://apis.google.com/js/plusone.js';
                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                            })();
                        </script>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="footer">
        <ul class="navigationLinks">
            <li>
                <a href="footer/1.html" target="_blank">HeartESTEEM</a>&nbsp; |
            </li>
            <li>
                <a href="footer/2.html" target="_blank">HeartESTEEM Gallery</a>&nbsp; |
            </li>
            <li>
                <a href="footer/3.html" target="_blank">Gloria Maxx</a>&nbsp; |
            </li>
            <li>
                <a href="footer/4.html" target="_blank">PPD</a>&nbsp; |
            </li>
            <li>
                <a href="footer/5.html" target="_blank">FriendsInHeart</a>&nbsp; |
            </li>
            <li>
                <a href="footer/6.html" target="_blank">HeartIZTS</a>&nbsp; |
            </li>
            <li>
                <a href="footer/7.html" target="_blank">HeartPILLARS</a>&nbsp; |
            </li>
            <li>
                <a href="footer/8.html" target="_blank">Terms and Privacy</a>&nbsp; |
            </li>
            <li>
                <a href="footer/9.html" target="_blank">Trademarks</a>&nbsp; |
            </li>
            <li>
                <a href="footer/10.html" target="_blank">Contact</a>
            </li>
        </ul>
    </div>
</div>
<div id="fb-root"></div><script>
    window.fbAsyncInit = function() {
    FB.init({
        appId: '441699992574659',// Heart App created in FB - App ID
        channelUrl: 'http://angelicsweets.ca/2014/channel.html', // Channel File
        //status: true, // check login status, use either FB.getLoginStatus() or this
        oauth: true, // enable OAuth 2.0
        cookie: true // enable cookies to allow the server to access the session
    });
    };

    // Load the SDK Asynchronously
    (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
    }(document));
</script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.1.custom1.js"></script>
<!--<script src="js/diQuery-collapsiblePanel.js"></script>-->
<script type="text/javascript" src="js/paint_bucket1.js"></script>
<!--<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>--> <!-- https://github.com/mathiasbynens/jquery-placeholder -->
<script type="text/javascript" src="js/app_jquery.js"></script>
</body>
</html>